<script lang="ts" setup>
import { ref } from "vue";
import request from "../utils/request";
import type { ChannelItem } from "../types/data";
const channels = ref<ChannelItem[]>([]);

defineProps<{
  channelId: string;
}>();

const emits = defineEmits<{
  (e: "changeChannelId", channelId: string): void;
}>();

const getChannels = async () => {
  const r = await request<ChannelItem[]>("/channels");
  channels.value = r.data;
  // !初始的 channelId
  emits("changeChannelId", channels.value[0].id);
};
getChannels();
</script>

<template>
  <ul class="catagtory">
    <li
      :class="{
        select: channelId === channel.id,
      }"
      v-for="channel in channels"
      :key="channel.id"
      @click="emits('changeChannelId', channel.id)"
    >
      {{ channel.name }}
    </li>
  </ul>
</template>

<style scoed lang="less"></style>
